@strapi/admin 4.0.3 → 4.0.4

package/admin/src/components/LeftMenu/index.js

@@ -80,12 +80,20 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
     }
   };
 
+  const menuTitle = formatMessage({
+    id: 'app.components.LeftMenu.navbrand.title',
+    defaultMessage: 'Strapi Dashboard',
+  });
+
   return (
     <MainNav condensed={condensed}>
       <NavBrand
-        workplace="Workplace"
-        title="Strapi Dashboard"
-        icon={<img src={menuLogo} alt="Strapi Dashboard" />}
+        workplace={formatMessage({
+          id: 'app.components.LeftMenu.navbrand.workplace',
+          defaultMessage: 'Workplace',
+        })}
+        title={menuTitle}
+        icon={<img src={menuLogo} alt={menuTitle} />}
       />
 
       <Divider />

package/admin/src/content-manager/components/DynamicZone/components/DzLabel/index.js

@@ -17,7 +17,7 @@ const StyledBox = styled(Box)`
   border-radius: ${pxToRem(26)};
 `;
 
-const DzLabel = ({ label, labelAction, name, numberOfComponents, required }) => {
+const DzLabel = ({ label, labelAction, name, numberOfComponents, required, intlDescription }) => {
   const { formatMessage } = useIntl();
   const intlLabel = formatMessage({ id: label || name, defaultMessage: label || name });
 
@@ -33,12 +33,24 @@ const DzLabel = ({ label, labelAction, name, numberOfComponents, required }) =>
           shadow="filterShadow"
           color="neutral500"
         >
-          <Flex>
-            <Typography fontSize={0} lineHeight={0} textColor="neutral600" fontWeight="bold">
-              {intlLabel}&nbsp;({numberOfComponents})
-            </Typography>
-            {required && <Typography textColor="danger600">*</Typography>}
-            {labelAction && <Box paddingLeft={1}>{labelAction}</Box>}
+          <Flex direction="column" justifyContent="center">
+            <Flex maxWidth={pxToRem(356)}>
+              <Typography variant="pi" textColor="neutral600" fontWeight="bold" ellipsis>
+                {intlLabel}&nbsp;
+              </Typography>
+              <Typography variant="pi" textColor="neutral600" fontWeight="bold">
+                ({numberOfComponents})
+              </Typography>
+              {required && <Typography textColor="danger600">*</Typography>}
+              {labelAction && <Box paddingLeft={1}>{labelAction}</Box>}
+            </Flex>
+            {intlDescription && (
+              <Box paddingTop={1} maxWidth={pxToRem(356)}>
+                <Typography variant="pi" textColor="neutral600" ellipsis>
+                  {formatMessage(intlDescription)}
+                </Typography>
+              </Box>
+            )}
           </Flex>
         </StyledBox>
       </Box>
@@ -47,12 +59,17 @@ const DzLabel = ({ label, labelAction, name, numberOfComponents, required }) =>
 };
 
 DzLabel.defaultProps = {
+  intlDescription: undefined,
   label: '',
   labelAction: undefined,
   required: false,
 };
 
 DzLabel.propTypes = {
+  intlDescription: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    defaultMessage: PropTypes.string.isRequired,
+  }),
   label: PropTypes.string,
   labelAction: PropTypes.element,
   name: PropTypes.string.isRequired,

package/admin/src/content-manager/components/DynamicZone/index.js

@@ -39,6 +39,9 @@ const DynamicZone = ({
   const [isOpen, setIsOpen] = useState(false);
   const [shouldOpenAddedComponent, setShouldOpenAddedComponent] = useState(false);
   const dynamicDisplayedComponentsLength = dynamicDisplayedComponents.length;
+  const intlDescription = metadatas.description
+    ? { id: metadatas.description, defaultMessage: metadatas.description }
+    : null;
 
   const [componentCollapses, setComponentsCollapses] = useState(
     createCollapses(dynamicDisplayedComponentsLength)
@@ -159,11 +162,7 @@ const DynamicZone = ({
   if (!isFieldAllowed && isCreatingEntry) {
     return (
       <NotAllowedInput
-        description={
-          metadatas.description
-            ? { id: metadatas.description, defaultMessage: metadatas.description }
-            : null
-        }
+        description={intlDescription}
         intlLabel={{ id: metadatas.label, defaultMessage: metadatas.label }}
         labelAction={labelAction}
         name={name}
@@ -174,11 +173,7 @@ const DynamicZone = ({
   if (!isFieldAllowed && !isFieldReadable && !isCreatingEntry) {
     return (
       <NotAllowedInput
-        description={
-          metadatas.description
-            ? { id: metadatas.description, defaultMessage: metadatas.description }
-            : null
-        }
+        description={intlDescription}
         intlLabel={{ id: metadatas.label, defaultMessage: metadatas.label }}
         labelAction={labelAction}
         name={name}
@@ -191,6 +186,7 @@ const DynamicZone = ({
       {dynamicDisplayedComponentsLength > 0 && (
         <Box>
           <DzLabel
+            intlDescription={intlDescription}
             label={metadatas.label}
             labelAction={labelAction}
             name={name}

package/admin/src/content-manager/components/Wysiwyg/Editor.js

@@ -25,9 +25,8 @@ const Editor = ({
       lineWrapping: true,
       extraKeys: {
         Enter: 'newlineAndIndentContinueMarkdownList',
-        // Leaving this commented for now
-        // Tab: false,
-        // 'Shift-Tab': false,
+        Tab: false,
+        'Shift-Tab': false,
       },
       readOnly: false,
       smartIndent: false,

package/admin/src/content-manager/components/Wysiwyg/EditorLayout.js

@@ -68,6 +68,7 @@ export const EditorLayout = ({ children, isExpandMode, error, previewContent, on
             bottom={0}
             zIndex={4}
             justifyContent="center"
+            onClick={onCollapse}
           >
             <Box
               id="wysiwyg-expand"
@@ -77,6 +78,7 @@ export const EditorLayout = ({ children, isExpandMode, error, previewContent, on
               overflow="hidden"
               width="70%"
               height="70%"
+              onClick={e => e.stopPropagation()}
             >
               <Flex height="100%" alignItems="flex-start">
                 <BoxWithBorder flex="1" height="100%">

package/admin/src/content-manager/components/Wysiwyg/WysiwygFooter.js

@@ -7,13 +7,13 @@ import { Typography } from '@strapi/design-system/Typography';
 import Expand from '@strapi/icons/Expand';
 import { ExpandButton } from './WysiwygStyles';
 
-const WysiwygFooter = ({ isPreviewMode, onToggleExpand }) => {
+const WysiwygFooter = ({ onToggleExpand }) => {
   const { formatMessage } = useIntl();
 
   return (
     <Box padding={2} background="neutral100" hasRadius>
       <Flex justifyContent="flex-end" alignItems="flex-end">
-        <ExpandButton id="expand" disabled={isPreviewMode} onClick={onToggleExpand}>
+        <ExpandButton id="expand" onClick={onToggleExpand}>
           <Typography>
             {formatMessage({
               id: 'components.WysiwygBottomControls.fullscreen',
@@ -29,12 +29,10 @@ const WysiwygFooter = ({ isPreviewMode, onToggleExpand }) => {
 
 WysiwygFooter.defaultProps = {
   onToggleExpand: () => {},
-  isPreviewMode: false,
 };
 
 WysiwygFooter.propTypes = {
   onToggleExpand: PropTypes.func,
-  isPreviewMode: PropTypes.bool,
 };
 
 export default WysiwygFooter;

package/admin/src/content-manager/components/Wysiwyg/WysiwygNav.js

@@ -1,6 +1,7 @@
 import React, { useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
+import { FocusTrap } from '@strapi/design-system/FocusTrap';
 import { Box } from '@strapi/design-system/Box';
 import { Button } from '@strapi/design-system/Button';
 import { IconButtonGroup } from '@strapi/design-system/IconButton';
@@ -41,7 +42,9 @@ const WysiwygNav = ({
   });
   const buttonMoreRef = useRef();
 
-  const handleTogglePopover = () => setVisiblePopover(prev => !prev);
+  const handleTogglePopover = () => {
+    setVisiblePopover(prev => !prev);
+  };
 
   if (isPreviewMode) {
     return (
@@ -81,10 +84,10 @@ const WysiwygNav = ({
               />
             </MainButtons>
 
-            <MoreButton disabled ref={buttonMoreRef} id="more" label="More" icon={<More />} />
+            <MoreButton disabled id="more" label="More" icon={<More />} />
           </Flex>
 
-          <Button onClick={onTogglePreviewMode} variant="tertiary" size="L" id="preview">
+          <Button onClick={onTogglePreviewMode} variant="tertiary" id="preview">
             {formatMessage({
               id: 'components.Wysiwyg.ToggleMode.markdown-mode',
               defaultMessage: 'Markdown mode',
@@ -146,65 +149,67 @@ const WysiwygNav = ({
           />
           {visiblePopover && (
             <Popover centered source={buttonMoreRef} spacing={4} id="popover">
-              <Flex>
-                <IconButtonGroupMargin>
-                  <CustomIconButton
-                    onClick={() => onActionClick('Strikethrough', editorRef, handleTogglePopover)}
-                    id="Strikethrough"
-                    label="Strikethrough"
-                    name="Strikethrough"
-                    icon={<Strikethrough />}
-                  />
-                  <CustomIconButton
-                    onClick={() => onActionClick('BulletList', editorRef, handleTogglePopover)}
-                    id="BulletList"
-                    label="BulletList"
-                    name="BulletList"
-                    icon={<BulletList />}
-                  />
-                  <CustomIconButton
-                    onClick={() => onActionClick('NumberList', editorRef, handleTogglePopover)}
-                    id="NumberList"
-                    label="NumberList"
-                    name="NumberList"
-                    icon={<NumberList />}
-                  />
-                </IconButtonGroupMargin>
-                <IconButtonGroup>
-                  <CustomIconButton
-                    onClick={() => onActionClick('Code', editorRef, handleTogglePopover)}
-                    id="Code"
-                    label="Code"
-                    name="Code"
-                    icon={<Code />}
-                  />
-                  <CustomIconButton
-                    onClick={() => {
-                      handleTogglePopover();
-                      onToggleMediaLib();
-                    }}
-                    id="Image"
-                    label="Image"
-                    name="Image"
-                    icon={<Image />}
-                  />
-                  <CustomLinkIconButton
-                    onClick={() => onActionClick('Link', editorRef, handleTogglePopover)}
-                    id="Link"
-                    label="Link"
-                    name="Link"
-                    // eslint-disable-next-line jsx-a11y/anchor-is-valid
-                    icon={<Link />}
-                  />
-                  <CustomIconButton
-                    onClick={() => onActionClick('Quote', editorRef, handleTogglePopover)}
-                    id="Quote"
-                    label="Quote"
-                    name="Quote"
-                    icon={<Quote />}
-                  />
-                </IconButtonGroup>
-              </Flex>
+              <FocusTrap onEscape={handleTogglePopover}>
+                <Flex>
+                  <IconButtonGroupMargin>
+                    <CustomIconButton
+                      onClick={() => onActionClick('Strikethrough', editorRef, handleTogglePopover)}
+                      id="Strikethrough"
+                      label="Strikethrough"
+                      name="Strikethrough"
+                      icon={<Strikethrough />}
+                    />
+                    <CustomIconButton
+                      onClick={() => onActionClick('BulletList', editorRef, handleTogglePopover)}
+                      id="BulletList"
+                      label="BulletList"
+                      name="BulletList"
+                      icon={<BulletList />}
+                    />
+                    <CustomIconButton
+                      onClick={() => onActionClick('NumberList', editorRef, handleTogglePopover)}
+                      id="NumberList"
+                      label="NumberList"
+                      name="NumberList"
+                      icon={<NumberList />}
+                    />
+                  </IconButtonGroupMargin>
+                  <IconButtonGroup>
+                    <CustomIconButton
+                      onClick={() => onActionClick('Code', editorRef, handleTogglePopover)}
+                      id="Code"
+                      label="Code"
+                      name="Code"
+                      icon={<Code />}
+                    />
+                    <CustomIconButton
+                      onClick={() => {
+                        handleTogglePopover();
+                        onToggleMediaLib();
+                      }}
+                      id="Image"
+                      label="Image"
+                      name="Image"
+                      icon={<Image />}
+                    />
+                    <CustomLinkIconButton
+                      onClick={() => onActionClick('Link', editorRef, handleTogglePopover)}
+                      id="Link"
+                      label="Link"
+                      name="Link"
+                      // eslint-disable-next-line jsx-a11y/anchor-is-valid
+                      icon={<Link />}
+                    />
+                    <CustomIconButton
+                      onClick={() => onActionClick('Quote', editorRef, handleTogglePopover)}
+                      id="Quote"
+                      label="Quote"
+                      name="Quote"
+                      icon={<Quote />}
+                    />
+                  </IconButtonGroup>
+                </Flex>
+              </FocusTrap>
             </Popover>
           )}
         </Flex>

package/admin/src/content-manager/components/Wysiwyg/index.js

@@ -26,6 +26,10 @@ const LabelAction = styled(Box)`
   }
 `;
 
+const TypographyAsterisk = styled(Typography)`
+  line-height: 0;
+`;
+
 const Wysiwyg = ({
   description,
   disabled,
@@ -36,6 +40,7 @@ const Wysiwyg = ({
   onChange,
   placeholder,
   value,
+  required,
 }) => {
   const { formatMessage } = useIntl();
   const textareaRef = useRef(null);
@@ -49,7 +54,10 @@ const Wysiwyg = ({
 
   const handleToggleMediaLib = () => setMediaLibVisible(prev => !prev);
   const handleTogglePreviewMode = () => setIsPreviewMode(prev => !prev);
-  const handleToggleExpand = () => setIsExpandMode(prev => !prev);
+  const handleToggleExpand = () => {
+    setIsPreviewMode(false);
+    setIsExpandMode(prev => !prev);
+  };
 
   const handleActionClick = (value, currentEditorRef, togglePopover) => {
     switch (value) {
@@ -124,6 +132,7 @@ const Wysiwyg = ({
         <Stack horizontal size={1}>
           <Typography variant="pi" fontWeight="bold" textColor="neutral800">
             {label}
+            {required && <TypographyAsterisk textColor="danger600">*</TypographyAsterisk>}
           </Typography>
           {labelAction && <LabelAction paddingLeft={1}>{labelAction}</LabelAction>}
         </Stack>
@@ -154,9 +163,7 @@ const Wysiwyg = ({
             value={value}
           />
 
-          {!isExpandMode && (
-            <WysiwygFooter isPreviewMode={isPreviewMode} onToggleExpand={handleToggleExpand} />
-          )}
+          {!isExpandMode && <WysiwygFooter onToggleExpand={handleToggleExpand} />}
         </EditorLayout>
         <Hint description={description} name={name} error={error} />
       </Stack>
@@ -182,6 +189,7 @@ Wysiwyg.defaultProps = {
   error: '',
   labelAction: undefined,
   placeholder: null,
+  required: false,
   value: '',
 };
 
@@ -206,6 +214,7 @@ Wysiwyg.propTypes = {
     defaultMessage: PropTypes.string.isRequired,
     values: PropTypes.object,
   }),
+  required: PropTypes.bool,
   value: PropTypes.string,
 };
 

package/admin/src/translations/en.json

@@ -284,6 +284,8 @@
   "app.components.LeftMenu.expand": "Expand the navbar",
   "app.components.LeftMenu.logout": "Logout",
   "app.components.LeftMenu.profile": "Profile",
+  "app.components.LeftMenu.navbrand.title": "Strapi Dashboard",
+  "app.components.LeftMenu.navbrand.workplace": "Workplace",
   "app.components.LeftMenuFooter.documentation": "Documentation",
   "app.components.LeftMenuFooter.help": "Help",
   "app.components.LeftMenuFooter.poweredBy": "Powered by ",